<div id="myVue" class="right_col" role="main">
    <h3>This is Vue test page.</h3>
    <p>========= 数据单项绑定 ========</p>
    <h4>{{company}}</h4>
    <p><span style="color: red">{{commanyError}}</span></p>
    <p>{{user.name | filter1 | filter2}}</p>
    <p>{{nameComputed}}</p>
    <p><span style="color: red">{{userNameError}}</span></p>
    <p>{{user.age}}</p>
    <p>{{user.gender}}</p>
    <p>{{user.roles}}</p>
    <p>{{user.city}}</p>
    <form>
        <input type="text" :value="user.name" />
    </form>
    <p>========= 数据双项绑定 && 列表渲染 ========</p>
    <form>
        <p><input type="text" v-model.trim="company" /></p>
        <p><input type="text" v-model.trim="user.name" /></p>
        <p><input type="number" v-model.number="user.age" /></p>
        <p>
			<span v-for="item in genders">
                <input type="radio" :value="item" :key="item" v-model="user.gender" /> {{item}}</span>
        </p>
        <p>
			<span v-for="item in roles">
				<input type="checkbox" :value="item.id" :key="item.id" v-model="user.roles" /> {{item.name}}
			</span>
        </p>
        <p>
            <select v-model="user.city">
                <option v-for="(item, index) in cities" :value="item.id" :key="item.id">{{item.name}} -- {{index}}</option>
            </select>
        </p>
        <p>
            <ul>
                <li v-for="item in cities" id="item.id" :key="item.id">{{item.name}}</li>
            </ul>
        </p>
        <p>
        <table>
            <tr>
                <td>ID</td>
                <td>Name</td>
            </tr>
            <tr v-for="item in cities">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </table>
        </p>
    </form>
    <p>========= 条件渲染 ========</p>
    <p><span v-if="user.name == 'hujiang'">鸡哥.</span></p>
    <p><span v-show="user.name == 'jianghu'">鸭哥</span></p>
    <p>========= 事件绑定 ========</p>
    <p>
        <button @click="test1()">test1</button>
    </p>
    <p>
        <button name="btn" data="dsfdsfsdfsd" @click="test2($event)">test2</button>
    </p>
    <p>========= 动画 ========</p>
    <p><button @click="show = !show">点击改变动画</button></p>
    <transition name = "fade">
        <p v-show ="show">显示动画</p>
    </transition>
</div>

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity 2s
    }
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
</style>

<script>
    $(function () {
        alert("1111111");
        test1();
    });

    Vue.filter("filter1",function (value) {
        if (!value) {
            return "";
        }
        return value.replaceAll("a","*");
    });

    var myVue = new Vue({
        el: "#myVue",
        data: {
            company: "SFAC",
            commanyError:"",
            user: {
                name: "hujiang",
                age: 18,
                gender: "male",
                roles: [],
                city: 2,
            },
            usernameError:"",
            roles: [
                { id: 1, name: "admin" },
                { id: 2, name: "manager" },
                { id: 3, name: "staff" },
            ],
            genders: ["male", "female"],
            cities: [
                { id: 1, name: "chengdu" },
                { id: 2, name: "chongqing" },
                { id: 3, name: "wuhan" },
                { id: 4, name: "nanjing" },
                { id: 5, name: "shanghai" },
            ], show:true,
        },
        methods: {
            test1: function () {
                console.log("This is test 1 function.");
            },
            test2: function (event) {
                console.log(event.currentTarget.name);
                console.log(event.currentTarget.attributes.data.value);
            },
        },
        watch:{
            company(newValue, oldValue){
                this.commanyError = newValue.length > 6 ? "公司名太长" : "";
            },
            'user.name'(newValue, oldValue){
                this.usernameError = newValue.length > 6 ? "公司名太长" : "";
            },
        },
        computed:{
            nameComputed: function () {
                return this.user.name.toUpperCase();
            }
        },
        filters:{
            filter2:function (value) {
                if (!value){
                    return "";
                }
                return value.replaceAll("b","-");
            }
        },
        //Vue 初始化成功
        created(){
            window.test1 = this.test1;
        },
        // vue 实列加载完成，并且和页面元素绑定成功
        mounted(){
            this.test1();
        }
    });
</script>